<script setup>
import { onMounted, ref } from 'vue'
import { getGoodListByContentStateCidAPI, getCategoryListAPI, updateGoodInfoAPI, addCategoryAPI, addGoodAPI } from '@/apis/goods';
import { ElMessage, ElMessageBox } from 'element-plus';
import { trigger } from '@vue/reactivity';
const state = ref(0);
const cateList = ref([])
const goodList = ref([])
const cid = ref(null)
const gid = ref("")
const query = async () => {
    const res = await getGoodListByContentStateCidAPI(gid.value, state.value, cid.value)
    goodList.value = res.data
}
onMounted(async () => {
    query()
    const res = await getCategoryListAPI()
    cateList.value = res.data
})
const ifSelling = ref([
    null,
    "在售",
    "下架"
])

const updateGoodInfo = async (goodInfo) => {
    const res = await updateGoodInfoAPI(goodInfo);
    if (res.code == 1) {
        ElMessage({ type: 'success', message: '商品信息已更新' })
        query()
    }
    else {
        ElMessage({ type: 'error', message: '未查找到该商品' })
    }
}

const modifyImg = (goodInfo) => {
    ElMessageBox.prompt('（仅支持更换图片链接）请输入图片链接地址：', '更换图片', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then((content) => {
        goodInfo.src = content.value
        updateGoodInfo(goodInfo);
    })
}
const modifyGname = (goodInfo) => {
    ElMessageBox.prompt('请输入商品名称', '更换商品名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then((content) => {
        goodInfo.gname = content.value
        updateGoodInfo(goodInfo);
    })
}
const modifyPrice = (goodInfo) => {
    ElMessageBox.prompt('请输入商品售价', "修改商品售价", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then((content) => {
        goodInfo.price = content.value
        updateGoodInfo(goodInfo);
    })
}
const modifyDesc = (goodInfo) => {
    console.log(goodInfo);
    ElMessageBox.prompt('请输入商品描述', '更换商品描述', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then((content) => {
        goodInfo.desc = content.value
        updateGoodInfo(goodInfo);
    })
}
const modifyNum = (goodInfo) => {
    ElMessageBox.prompt('请输入商品库存', '修改商品库存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
    }).then((content) => {
        goodInfo.num = content.value
        updateGoodInfo(goodInfo);
    })
}
const modifyState = (goodInfo) => {
    if (goodInfo.state == 2) {
        ElMessageBox.confirm('确定将该商品上架售卖吗？', '商品状态切换', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }).then(() => {
            goodInfo.state = 1
            updateGoodInfo(goodInfo);
        })
    }
    else {
        ElMessageBox.confirm('确定将该商品下架吗？', '商品状态切换', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }).then(() => {
            goodInfo.state = 2
            updateGoodInfo(goodInfo);
        })
    }
}

const dialogAdd = ref(0)
const formAdd = ref({
    gname: "",
    cid: '',
    price: '',
    desc: '',
    src: '',
    num: 0,
    state: 1
})
const formRef = ref(null)
const rules = {
    gname: [
        { required: true, message: '商品名称不能为空', trigger: 'blur' },
        { min: 1, max: 30, message: '商品名称过长(不超过30字符)', trigger: 'blur' }
    ],
    cid: [
        { required: true, message: '商品分类不能为空', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '商品价格不能为空', trigger: 'blur' },
    ],
    desc: [
        { required: true, message: '商品描述不能为空', trigger: 'blur' },
        { min: 1, max: 100, message: '商品描述过长(不超过100字符)', trigger: 'blur' }
    ],
    num: [
        { required: true, message: '商品存货数量不能为空', trigger: 'blur' },
    ],
    state: [
        { required: true, message: '请选择商品状态', trigger: 'blur' },
    ]
}
const addGood = () => {
    const goodInfo = formAdd.value
    // 调用实例方法
    formRef.value.validate(async (valid) => {
        // valid: 所有表单都通过校验  才为true

        // 以valid做为判断条件 如果通过校验才执行登录逻辑
        if (valid) {
            // TODO LOGIN
            const res = await addGoodAPI(goodInfo)
            if (res.code == 1) {
                ElMessage({ type: "success", message: '商品已添加' })
                dialogAdd.value = 0
            }
            else ElMessage({ type: "error", message: "重复添加,请核对商品信息" })
        }
    })
}
const dialogAddCate = ref(0)
const cname = ref("")
const addCate = async () => {
    if (cname.value.length < 2 || cname.value.length > 4) {
        ElMessage({ type: 'info', message: '请输入(2-4)位的类名' })
    }
    else {

        await addCategoryAPI(cname.value)
        ElMessage({ type: 'success', message: '添加成功' })
        const res = await getCategoryListAPI();
        cateList.value = res.data;
        dialogAddCate.value = 0;
    }

}
</script>

<template>
    <el-main>
        <el-select v-model="state" style="box-shadow:-5px 5px 5px 0px #cdcdcd ; width: 100px;" @change="query()">
            <el-option label="全部" :value="0"> </el-option>
            <el-option label="在售" :value="1"> </el-option>
            <el-option label="下架" :value="2"> </el-option>
        </el-select>
        <el-select v-model="cid" style="box-shadow:0px 5px 5px 0px #cdcdcd ;width: 200px;" @change="query()">
            <el-option label="全部" :value="null"> </el-option>
            <el-option v-for="item in cateList" :label="item.cname" :value="item.cid"></el-option>
        </el-select>
        <el-input style="width: 200px;box-shadow:0px 5px 5px 0px #cdcdcd ;" v-model="gid"></el-input>
        <el-button type="primary" @click="query" style="box-shadow:0px 5px 5px 0px #cdcdcd ;">查询</el-button>
        <p style="display: inline-block;margin-left: 20px;color:#666666;width: 120px;">共&nbsp;{{ goodList.length }}&nbsp;件商品
        </p>
        <el-button type="primary" @click="dialogAddCate = 1"
            style="box-shadow:0px 5px 5px 0px #cdcdcd ;margin-left: 20px;">添加分类</el-button>

        <el-button type="primary" @click="dialogAdd = 1"
            style="box-shadow:0px 5px 5px 0px #cdcdcd ;margin-left: 20px;">添加商品</el-button>

        <el-table :data="goodList" :border="true"
            style="box-shadow:0 10px 5px 5px #cdcdcd ;width: 100% ;height:500px ;overflow:auto;">
            <el-table-column align="center" prop="gid" label="商品编号" />
            <el-table-column align="center" label="商品名称" width="150px">
                <template #default="scope">
                    <el-link @click="modifyGname(scope.row)">{{ scope.row.gname }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品图片" width="150px" height="50px">
                <template #default="scope">
                    <el-link @click="modifyImg(scope.row)"><el-image :src="scope.row.src"
                            style="width: 50px;height:50px;"></el-image></el-link>

                </template>
            </el-table-column>
            <el-table-column align="center" label="商品描述" width="150px">
                <template #default="scope">
                    <el-link @click="modifyDesc(scope.row)">{{ scope.row.desc }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品售价" width="150px">
                <template #default="scope">
                    <el-link @click="modifyPrice(scope.row)">{{ scope.row.price }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="库存" width="100px">
                <template #default="scope">
                    <el-link @click="modifyNum(scope.row)">{{ scope.row.num }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品状态" width="150px">
                <template #default="scope">

                    <el-link @click="modifyState(scope.row)">{{ ifSelling[scope.row.state] }}</el-link>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogAddCate" title="请输入类名：" style="width: 300px;">
            <el-form>
                <el-form-item label="" style="width: 100%;">
                    <el-input v-model="cname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="large" type="primary" style="width:100%" @click="addCate">点击添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogAdd" title="添加商品">
            <el-form ref="formRef" :model="formAdd" :rules="rules" style="width: 500px;margin: 0px auto;">
                <el-form-item prop="gname" label="商品名称">
                    <el-input v-model="formAdd.gname" />
                </el-form-item>
                <el-form-item prop="desc" label="商品描述">
                    <el-input v-model="formAdd.desc" />
                </el-form-item>
                <el-form-item prop='cid' label="商品类别">
                    <el-select v-model="formAdd.cid">
                        <el-option v-for="item in cateList" :label="item.cname" :value="item.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="price" label="商品售价">
                    <el-input v-model="formAdd.price" />
                </el-form-item>
                <el-form-item label="商品图片链接">
                    <el-input v-model="formAdd.src" />
                </el-form-item>
                <el-form-item prop="num" label="商品库存">
                    <el-input-number v-model="formAdd.num" min="0" style="width: 130px;"></el-input-number>
                </el-form-item>
                <el-form-item prop='state' label="商品状态">
                    <el-select v-model="formAdd.state">
                        <el-option label="在售" :value="1"></el-option>
                        <el-option label="下架" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-button size="large" type="primary" style="width:100%" @click="addGood">点击添加</el-button>
            </el-form>
        </el-dialog>


    </el-main>
</template>
